<template>
  <view class="components-home commonDiv">
    <u-navbar
      leftText="返回"
      title="学生列表"
      :safeAreaInsetTop="true"
      @leftClick="backPre"
      >
        <view
          class="u-nav-slot"
          slot="right"
          @click="backTo"
        >
        <view class="icon iconfont icon-shouye" style="font-weight: 600;"></view>
      </view>
    </u-navbar>
    <view class="top-inner">
      <view class="nav-list margin-top">
        <navigator
          open-type="navigate"
          hover-class="none"
          :url="item.title"
          :class="'nav-li bg-kuxuan' + (index+1)"
          v-for="(item, index) in kuxuan"
          :key="index"
        >
          <view class="nav-name">{{item.name}}</view>
          <text :class="'icon iconfont icon-' + item.icon"></text>
        </navigator>
      </view>
    </view>
    <view class='bot-inner'>
      <view class="title-header">
        <view class="title-text">大连青少年体型体态筛查初步记录表</view>
      </view> 
      <view class="title-header">
        <view class="title-text-des">第三项</view>
      </view> 

      <view class="qr-box" @click="toLink">
        <text class="icon iconfont icon-QRsao"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Components",
  data() {
    return {
      config:{
        title: '第三项',
        back:{
          iconForce: true,
        }
      },
      kuxuan: [
        {
          title: "/pages/home/studentList/index?activeProject=3",
          name: "学生信息查询",
          icon: 'xueshengtongji-01',
          color: "xueshengtongji-01"
        },
        {
          title: "/pages/home/facts/index",
          name: "本次检查实况",
          icon: 'shishitu',
          color: ""
        },
      ]
    };
  },
  methods: {
    backPre(){
      // uni.navigateBack({
      //   delta: 1 // delta值为1时表示返回上一级页面
      // })
      uni.reLaunch({
        url: '/pages/home/index'
      })
    },
    backTo(){
      uni.reLaunch({
        url: '/pages/home/index'
      })
    },
    tap() {
      uni.navigateTo({
        url: "/pages/example/components"
      });
    },
    toLink() {

      var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
      mpaasScanModule.mpaasScan({
          // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
          'scanType':  ['qrCode','barCode'],
          // 是否隐藏相册，默认false不隐藏
          'hideAlbum': true
        },
        (ret) => {
          let resData = JSON.parse(ret.resp_result)
          setTimeout(() => {
            uni.navigateTo({
              url:`/pages/home/inspectDetail/index?activeProject=3&studentId=${resData.studentId}`
            })
           }, 10)
        })

      // uni.scanCode({
      //   success: (res) => {
      //     let resData = JSON.parse(res.result)
      //     setTimeout(() => {
      //       uni.navigateTo({
      //         url:`/pages/home/inspectDetail/index?activeProject=3&studentId=${resData.studentId}`
      //       })
      //      }, 100);
      //   },
      //   fail: (err) => {
      //     console.error('扫码失败：' + err);
      //     uni.showToast({
      //       title: '扫码失败',
      //       icon: 'none'
      //     });
      //   }
      // });
    },
  }
};
</script>

<style lang="scss">
.components-home{
    height: calc(100vh - 130px);
    padding: 100px 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .top-inner{
      height: 80px;
      padding: 30px 20px 10px;
      width: 100%;
      box-sizing: border-box;
    }
    .bot-inner{
      flex: 1;
      font-size: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: auto;
    }
}


.nav-list {
  display: flex;
  padding: 0px 40upx 0px;
  justify-content: center;
}

.nav-li {
  padding: 30upx;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  background-image: url('@/static/img/nav-bg.png');
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  .iconfont{
    font-size: 40upx !important;
    padding-left: 20upx;
  }
}

.nav-li::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-li.cur {
  color: #fff;
  background: rgb(94, 185, 94);
  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}

.nav-name {
  font-size: 22upx;
  text-transform: Capitalize;
  margin: 10upx 2upx 0 0;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40upx;
  height: 6upx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100upx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40upx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 34upx;
  margin-right: 1px;
}

.title-header {
  display: flex;
  height: 120rpx;
  font-size: 40rpx;
  padding-bottom: 40rpx;
  align-items: center;
  justify-content: center;
  /* padding: 40rpx 0 0 0; */
  font-weight: bold;
}
.title-text {
  background-image: -webkit-linear-gradient(60deg, #388E3C, #26A69A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-text-des{
  font-size: 34px;
  font-weight: 600;
  background-image: -webkit-linear-gradient(60deg, $u-grey-darken, $u-blue-grey-darken);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-kuxuan1 {
  background-color: #388E3C;
  color: #fff;
}

.bg-kuxuan2 {
  background-color: #26A69A;
  color: #fff;
}

.qr-box{
  height: 200px;
  width: 200px;
  background: #f5f5f5;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .iconfont{
    font-size: 60px;
    color: $u-primary;
  }
}

</style>
